<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    title="领取VIP学员"
    @close="getVipClose"
    width="420px"
    class="get_vip_dialog"
  >
    <el-form
      ref="form"
      :model="vipForm"
      :rules="vipRules"
      label-width="80px"
      label-position="top"
      class="get_form"
    >
      <el-form-item label="学员名称" prop="customerName">
        <el-input v-model="vipForm.customerName" disabled />
      </el-form-item>
      <el-form-item label="领取方式" prop="validType">
        <el-radio-group v-model="vipForm.validType" @change="typeChange">
          <el-radio :label="1">微信号</el-radio>
          <el-radio :label="0">手机号</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="请输入微信号"
        prop="wechat"
        v-if="vipForm.validType == 1"
      >
        <el-input
          v-model="vipForm.wechat"
          placeholder="请输入微信号"
          clearable
        />
      </el-form-item>
      <el-form-item
        label="请输入手机号"
        prop="phone"
        v-else-if="vipForm.validType == 0"
      >
        <el-input
          v-model="vipForm.phone"
          placeholder="请输入手机号"
          clearable
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="getVipClose">取 消</el-button>
      <el-button type="primary" @click="getVipSubmit">保 存</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { chinaMobileRegex } from "@/utils";
import { mapGetters } from "vuex";
import { receiveStudent } from "@/api/crm/vipStuPool.js";
export default {
  /**
   * vip池子-领取
   */
  name: "GetsVipStu",
  data() {
    return {
      visible: false,
      vipForm: {
        customerName: "",
        validType: 1,
        wechat: "",
        phone: "",
      },
      vipRules: {
        wechat: [
          { required: true, message: "微信号不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: chinaMobileRegex,
            message: "目前只支持中国大陆的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    getDialog: {
      handler(val) {
        if (val) {
          this.visible = true;
        } else {
          this.visible = false;
        }
      },
      immediate: true,
    },
    rowDatas: {
      handler(val) {
        if (val && val.customerName) {
          this.vipForm.customerName = val.customerName;
        } else {
          this.vipForm.customerName = "";
        }
      },
      deep: true,
      immediate: true,
    },
  },
  props: ["getDialog", "rowDatas"],
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    /**
     * 弹框-关闭
     */
    getVipClose() {
      this.$refs.form.resetFields();
      this.visible = false;
    },
    /**
     * 弹框-确定
     */
    getVipSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = {
            ids: [this.rowDatas.studentId],
            assistantUserId: this.userInfo.userId,
            validType: this.vipForm.validType,
          };
          if (this.vipForm.validType == 1) {
            params.wechat = this.vipForm.wechat;
          } else if (this.vipForm.validType == 0) {
            params.phone = this.vipForm.phone;
          }
          receiveStudent(params).then((res) => {
            if (res.code == 0) {
              this.$message.success("领取成功");
              this.$emit('submit')
              this.visible = false;
            } else {
              this.$message.error(res.msg,2000);
            }
          });
        }
      });
    },
    /**
     *  领取方式-change
     */
    typeChange() {
      this.$refs.form.clearValidate(["wechat", "phone"]);
    },
  },
};
</script>
<style scoped lang="scss">
.get_vip_dialog {
  /deep/ .el-dialog__header {
    padding-top: 25px !important;
  }
  /deep/ .el-dialog__body {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .get_form {
    /deep/ .el-form-item__label {
      line-height: 6px !important;
    }
  }
}
</style>